/*chat 对话框*/
.weChatMainContainer {
  position: relative;
  height: calc(100vh - 50px);
  overflow: hidden;
  background-color: #ffffff;

}

.weChatMainContainer .weChatMainWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  /*background-color: #fff;*/
}

.weChatMainWrap .weChatMainHeader {
  flex-shrink: 0;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*padding: 0 20px;*/
  padding-left: 20px;
  padding-right: 14px;
  /*border: 1px solid #EBEBEB;*/
  border-bottom: 1px solid #EBEBEB;
}

.weChatMainHeader .weChatHeaderAvatarBox {
  display: flex;
}

.weChatHeaderAvatarBox .nameBox {
  margin-right: 11px;
}

.weChatHeaderAvatarBox .name {
  color: #3E3F42;
  font-size: 14px;
  font-weight: 900;
  margin-top: 2px;
}

.weChatMainContent {
  flex: 1;
  padding-top: 10px;
  padding-left: 16px;
  padding-right: 16px;
  overflow-y: auto;
}

/*聊天内容开始: 区分个人和他人*/
.weChatMainContent .messageTime {
  margin-top: 16px;
  font-size: 12px;
  color: #A4A8BA;
  text-align: center;
}
.messageOther {
  position: relative;
}
.messageOther .WeChatContactsAvatarTools {
  //position: absolute;
  width: 177px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  border: 1px solid #D8DCE6;
  cursor: pointer;
  z-index: 99;
}
.messageContent .messageContentItem {
  display: flex;
  flex-direction: row;
}
.messageContent .messageContentAvatar {
  width: 44px;
  height: 44px;
  margin-right: 12px;
}

.messageContentTxtMT2 {
  margin-top: 2px;
}

.messageContentTxtMT6 {
  margin-top: 6px;
}

.messageContent .messageContentTxt {
  max-width: 220px;
  font-size: 12px;
  padding: 8px 14px;
  background: #F2F2F2;
  color: #666666;
  border-radius: 0 10px 10px 0;
  box-sizing: border-box;
}

.messageContent .messageContentFile {
  display: flex;
  width: 267px;
  height: 58px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(207, 207, 207, 0.5);
  border-radius: 2px;
  border: 1px solid #DDDDDD;
  margin-top: 8px;
}

.messageContentFile .messageContentIcon {
  width: 50px;
  height: 100%;
  background: #0081CC;
  border-radius: 2px 0 0 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

.messageContentFile .messageContentDetail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex: 1;
}

.messageContentFile .messageContentFileNameBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.messageContentFileNameBox .fileName {
  font-size: 14px;
  font-weight: bold;
  color: #666666;
}

.messageContentFileNameBox .fileSize {
  font-size: 12px;
  color: #999999;
}

/*自己的聊天气泡*/
.messageMyself {
  display: flex;
  flex-direction: row-reverse !important;
  position: relative;
}
/*右键菜单*/
.messageMyself  .WeChatContactsAvatarTools {
  position: absolute;
  width: 182px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  border: 1px solid #D8DCE6;
  z-index: 99;
  /*top: 10px;*/
  /*right: 0;*/
  top: 50%;
  right: 10%;
  cursor:pointer
}
.messageMyself .messageContentAvatar {
  width: 44px;
  height: 44px;
  margin-left: 12px;
}

.messageContentTxtMT2 {
  margin-top: 2px;
}

.messageContentTxtMT6 {
  margin-top: 6px;
}

.messageMyself .messageContentTxt {
  max-width: 220px;
  font-size: 12px;
  padding: 8px 14px;
  color: #666666;
  border-radius: 10px 0 0 10px;
  background: #e0eff8;
}

.messageMyself .messageContentItem {
  display: flex;
  align-items: center;
  position: relative;
}


.messageMyself .messageContentFile {
  display: flex;
  width: 267px;
  height: 58px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(207, 207, 207, 0.5);
  border-radius: 2px;
  border: 1px solid #DDDDDD;
  margin-top: 8px;
}
/*通用cssName*/
.messageContentImg{
  /*width: 279px;*/
  /*height: 152px;*/
  background: #F2F2F2;
  border-radius: 2px;
  padding: 6px;

}

/*聊天头部*/
.weChatHeaderAvatarBox .tips {
  font-size: 12px;
  color: #999999;
}

.weChatMainHeader .tool:first-child {
  margin-left: 0;
}

.weChatMainHeader .tool {
  margin-left: 12px;
}

.weChatMainFooter {
  flex-shrink: 0;
  padding-bottom: 29px;
  position: relative;
  padding-top: 8px;
}
.weChatFooterOptionContent{
  display: flex;
  align-items: center;
  width: 220px;
  height: 32px;
}
.weChatFooterOptionContent div:last-child{
  margin-left: 8px;
  font-size: 12px;
  color: #333333;
}
/*表情*/
.weChatMainFooter .emojiBox{
  width: 684px;
  height: 244px;
  box-shadow: 0 2px 10px 0 rgba(213, 213, 213, 0.5);
  border-radius: 2px;
  position: absolute;
  bottom: 100%;
  left: 16px;
  background-color: #ffffff;
  z-index: 99;
  /*padding-top: 20px;*/
  padding: 20px 16px 10px 16px;
}

.emojiItemBox{
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .emojiItem{
    padding: 2px 2px;
  }
}

.weChatMainFooter .weChatMainToolsBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  color: #3D4A59;
  user-select: none;
  padding: 0 24px;
}
.weChatMainFooter .blue{
  color: #fff;
  background: #0081CC;
  border-radius: 50%;
}
.weChatMainFooter .firstTools {
  //margin-left: 20px;
}

.weChatMainFooter .secondTools {
  margin-left: 14px;
}

.weChatMainFooter .thirdTools {
  margin-left: 13px;
}

.weChatMainFooter .weChatMainInputBox {
  display: flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 16px;
}

.weChatMainFooter .weChatMainInputWrap {
  width: 100%;
}

.weChatMainFooter .weChatMainInputWrap textarea::-webkit-input-placeholder {
  color: #A4A8BA;
}

.weChatMainFooter .weChatMainInputWrap .ant-upload{
  height: 42px;
  line-height: 42px;
}
.weChatMainFooter .ant-upload.ant-upload-drag{
  background: #fff;
  border: 2px solid #0081CC;;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.weChatMainFooter .ant-upload.ant-upload-drag .ant-upload{
  padding: 0;
  color: #0081CC;
  font-size: 14px;
}

.weChatMainFooter .weChatMainInputBoxSent {
  flex-shrink: 0;
  font-size: 20px;
  margin-left: 16px;
}

/*chat 联系人*/
.WeChatContactsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 66px;
  padding: 0 19px;
}

.WeChatContactsHeader .title {
  font-size: 16px;
  font-weight: bold;
  color: #47484B;
}

.WeChatContactsHeader .iconBox {
  font-size: 14px;
}

.WeChatContactsHeader .add {
  margin-left: 14px;
}

.WeChatContactsItemBox {
  padding: 0 20px;
  position: relative;
}

/*选中的颜色*/
.WeChatContactsItemBoxActive {
  background: #e0eff8;
}

 .WeChatContactsAvatarTools {
  width: 177px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  border: 1px solid #D8DCE6;
  z-index: 99;
  cursor:pointer;
  .rightClickItems{
    line-height: 42px;
    height: 42px;
    font-size: 12px;
    padding-left: 22px;
  }
  .rightClickItems:last-child{
    border-top: 1px solid #D8DCE6;
  }
  .rightClickItems:hover{
    background-color: #D8DCE6;
  }
}

//.WeChatContactsAvatarTools .items {
//  display: flex;
//  align-items: center;
//  padding-left: 22px;
//}
//.WeChatContactsAvatarTools .lastItem {
//  display: flex;
//  align-items: center;
//  height: 42px;
//  font-size: 12px;
//  border-top: 1px solid #D8DCE6;
//}
//.WeChatContactsAvatarTools .myToolsLastOne{
//  border-top: 1px solid #D8DCE6;
//}
//.WeChatContactsAvatarTools .lastItem  div:first-child {
//  margin-left: 16px;
//  margin-right: 15px;
//  font-size: 14px;
//}
//.WeChatContactsAvatarTools .items  div:first-child {
//  margin-left: 16px;
//  margin-right: 15px;
//  font-size: 14px;
//}

.WeChatContactsItem {
  height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #EFEFEF;
}
// 联系人提示响应式
@media screen and (max-width: 1700px) {
  .WeChatContactsItem .tipsWord {
    width: 95px;
  }
  .WeChatContactsItem .name {
    width: 95px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 1300px) {
  .howTimeAgo{
    display: none;
  }
}
/*名字加标题做响应式*/
.WeChatContactsItem .nameAndTipsWordBox {
  margin-left: 11px;
}

.howTimeAgoAndTipsIcon {
  flex-shrink: 0;
}

.WeChatContactsItem .howTimeAgo {
  text-align: right;
  color: #999999;
  font-size: 12px;
}

.WeChatContactsItem .tipsIcon {
  margin-top: 4px;
  color: #D6D6D6;
  font-size: 13px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.WeChatContactsItem .towTipsIcon {
  color: #D6D6D6;
  font-size: 13px;
  text-align: right;
  /*vertical-align:middle*/
}
.WeChatContactsItem .towTipsIcon .ant-badge{
  margin-top: 1px;
}
/*联系人头像组件CSS*/
.ProAvatar .avatarBox {
  display: flex;
  align-items: center;
}
.ProAvatar .nameAndTipsWordBox{
  margin-left: 12px;
}
.ProAvatar .name {
  font-size: 14px;
  font-weight: 900;
  color: #3E3F42;
  margin-top: 2px;
}

.ProAvatar .tipsWord {
  font-size: 12px;
  color: #999999;
  width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 1700px) {
  .ProAvatar .tipsWord {
    width: 95px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ProAvatar .name {
    width: 95px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/*聊天人头像组件CSS和气泡*/
/*气泡距离*/
.ProHeaderAvatarPopTop{
  //margin-top: 20px;
  //top: 145px !important;
}
.ProHeaderAvatarPopTop .ant-popover-inner-content{
  padding: 0;
  margin-top: 20px;
}
.ProHeaderAvatarPopTop .ant-popover-content .ant-popover-arrow{
  top: 26px;
}
.ProHeaderAvatarPopover{
  width: 218px;
  height: 188px;
  background: #FFFFFF;
  border-radius: 10px;
}
.ProHeaderAvatarPopover .ProHeaderAvatarPopoverInfo{
  height: 112px;
  padding-top: 12px;
  padding-left: 20px;
  padding-right: 16px;
}
.ProHeaderAvatarPopover .ProHeaderAvatarPopoverInfo .PopoverInfoImageBox{
  display: flex;
  justify-content: space-between;
}
.ProHeaderAvatarPopover .ProHeaderAvatarPopoverInfo .PopoverInfoName{
  font-size: 14px;
  font-weight: 900;
  color: #3E3F42;
}
.ProHeaderAvatarPopover .ProHeaderAvatarPopoverInfo .PopoverInfoNumb{

  color: #999999;
  font-size: 12px;
}
.ProHeaderAvatarPopover .ProHeaderAvatarPopoverInfo .PopoverInfoAvatar{
  margin-top: 8px;
}
.ProHeaderAvatarPopover .ProHeaderAvatarPopoverInfo .PopoverInfoTools{
  display: flex;
  align-items: center;
  /*margin-top: 7px;*/
}
.ProHeaderAvatarPopover .ProHeaderAvatarPopoverInfo .PopoverInfoTools span{
  /*margin-left: 4px;*/
}
.ProHeaderAvatarPopover .ProHeaderAvatarPopoverInfo .status{
  color: #999999;
  font-size: 11px;
  margin-top: 5px;
}
.ProHeaderAvatarPopover .ContactWay {
  padding-left: 20px;
  height: 76px;
  border-top: 1px solid #EAEAEA;
}
.ProHeaderAvatarPopover .ContactWay .ContactWayItem{
  display: flex;
  /*align-items: center;*/
}
.ProHeaderAvatarPopover .ContactWay .ContactWayItem:first-child{
  margin-top: 14px;
}
.ProHeaderAvatarPopover .ContactWay .ContactWayItem div:first-child{
  margin-right: 14px;
  color: #0081CC;
}
.ProHeaderAvatarPopover .ContactWay .ContactWayItem div:last-child{
  font-size: 12px;
  color: #999999;
}
.ProHeaderAvatar .avatarBox {
  display: flex;
  align-items: center;
}



.ProHeaderAvatar .nameAndTipsWordBox{
  margin-left: 12px;
}
.ProHeaderAvatar .name {
  font-size: 14px;
  font-weight: 900;
  color: #3E3F42;
  margin-top: 2px;
}

.ProHeaderAvatar .tipsWord {
  font-size: 12px;
  color: #999999;
}

/*定制图片预览宽高*/
/*.ant-image-preview-img{*/
/*    max-width: 80% !important;*/
/*    max-height: 80% !important;*/
/*    border-radius: 10px;*/
/*}*/

/*抽屉内容*/
.chatDrawerContent{
  position: relative;
  padding-top: 20px;
  height: 100%;
}
.chatDrawerContent .close{
  position: absolute;
  top: 14px;
  right: 14px;
}
.chatDrawerContent .groupName{
  color: #999999;
  line-height: 22px;
  padding: 0 16px;
}
.chatDrawerContent .nameBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.chatDrawerContent .nameBox .name{
  width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  font-weight: 500;
  color: #3E3F42;
  line-height: 22px;
}
.chatDrawerContent .searchBox{
  margin-top: 7px;
  padding: 0 16px;
}
.chatDrawerContent .avatarBoxWrap{
  padding-top: 8px;
  padding-bottom: 8px;
}
.chatDrawerContent .addBox{
  display: flex;
  align-items: center;
  padding: 6px 16px;
}
.chatDrawerContent .addBox .bold{
  color: #3E3F42;
  font-weight: 900;
  margin-left: 12px;
}
.chatDrawerContent .avatarBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
}
.chatDrawerContent .avatarBox .avatarBoxLeft{
  display: flex;
  align-items: center;
}
.chatDrawerContent .avatarBox .avatarBoxLeft .name{
  color: #3E3F42;
  margin-left: 12px;
}
.chatDrawerContent .avatarBox .owner{
  color: #999999;
}
.chatDrawerContent .notifications{
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.chatDrawerContent .notifications .name{
  color: #3E3F42;
}
.chatDrawerContent  .fixBottom{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  //width: 108px;
  height: 28px;
  border-radius: 2px;
  border: 1px solid #E02020;
  font-size: 12px;
  color: #E02020;
}
// 2月25日
.publicAvatar{
  .ant-badge-dot{
    width: 14px;
    height: 14px;
  }
}
// 右键样式
.WeChatContactsAvatarTools {
  width: 182px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #D8DCE6;
  z-index: 99;
  cursor:pointer;
  .items:hover{
    background-color: #F2F2F2;
  }
}

